<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
</head>
<body style="font-family: 新宋体">
<%--商品Datagrid--%>
<table id="product_list_datagridID" class="easyui-datagrid"
       data-options="url:'${pageContext.request.contextPath}/ProductServlet?action=findAllProductAjax',
       fitColumns:true,singleSelect:true,fit:true,border:false,toolbar:'#product_toolbar'">
    <thead>
    <tr>
        <th data-options="field:'pid',width:'50',align:'center'">编号</th>
        <th data-options="field:'pname',width:'50',align:'center'">商品名称</th>
        <th data-options="field:'market_price',width:'50',align:'center'">市场价</th>
        <th data-options="field:'shop_price',width:'50',align:'center'">商城价</th>
        <th data-options="field:'pimage',width:'50',align:'center'" formatter="formatPic">图片</th>
        <th data-options="field:'pdate',width:'50',align:'center'" formatter="formatPdate">上架时间</th>
        <th data-options="field:'is_hot',width:'50',align:'center'" formatter="formatHot_flag">是否热门 </th>
        <th data-options="field:'pdesc',width:'50',align:'center'">商品描述</th>
        <th data-options="field:'pflag',width:'50',align:'center'" formatter="formatHot_flag">是否上架</th>
        <th data-options="field:'cname',width:'50',align:'center'" formatter="formatCategory">所属类别</th>
    </tr>
    </thead>
</table>
<%--商品Datagrid的工具栏--%>
<div id="product_toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newProduct()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="updateProduct()">修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
       onclick="deleteProduct()">删除</a>
    商品名称:<input id="find_name" style="width: 100px"/>类别名称:<input id="find_category" style="width: 100px"/>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true"
       onclick="searchProduct()">搜索</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-clear" plain="true" onclick="clearSearch()">清空搜索条件</a>
</div>
<%--新增和修改商品的Dialog--%>
<div id="product_list_dialogID" class="easyui-dialog" style="width:500px;height:500px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <form id="product_formID" method="post" enctype="multipart/form-data">
        <table cellpadding="3">
            <caption>商品信息</caption>
            <tr>
                <td>商品名称:</td>
                <td><input name="pname" class="easyui-validatebox" required="true"></td>
            </tr>
            <tr>
                <td>市场价:</td>
                <td><input name="market_price" class="easyui-numberbox" required="true" data-options="min:0,precision:2"></td>
            </tr>
            <tr>
                <td>商城价:</td>
                <td><input name="shop_price" class="easyui-numberbox" required="true" data-options="min:0,precision:2"></td>
            </tr>
            <tr>
                <td>图片:</td>
                <td><input name="pimage" class="easyui-filebox" buttonText="请选择文件..." accept="image/jpeg,image/png"></td>
            </tr>
            <tr>
                <td>上架时间:</td>
                <td><input name="pdate"  class="easyui-datebox" required="true" parser="parseDate" ></td>
            </tr><tr>
                <td>是否热门:</td>
            <td><select name="is_hot" style="width:60%;" data-options="editable:false,panelHeight:'auto'" class="easyui-combobox" id="hotComboboxID" ><option value="1">是</option><option value="0">否</option></select></td>
            </tr><tr>
                <td>商品描述:</td>
                <td><input name="pdesc" class="easyui-textbox" required="true" data-options="multiline:true" style="width:300px;height:100px"></td>
            </tr><tr>
                <td>是否上架:</td>
                <td><select name="pflag" style="width:60%;" data-options="editable:false,panelHeight:'auto'" class="easyui-combobox" id="pflagCombocoxID" required="true"><option value="1">是</option><option value="0">否</option></select></td>
            </tr><tr>
                <td>所属类别:</td>
            <td><select name="cid" style="width:60%;" id="cnameComboboxID" class="easyui-combobox" required="true" data-options="valueField:'cid',textField:'cname',url:'${pageContext.request.contextPath}/CategoryServlet?action=findAllCategoryAjax',editable:false,panelHeight:'auto',value:'1'"></select></td>
            </tr>
        </table>
    </form>
</div>
<%--新增和修改类别的Dialog中的Button--%>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveProduct()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#product_list_dialogID').dialog('close')">取消</a>
</div>
<script type="text/javascript">
    /*Datagrid相关设置*/
    $("#product_list_datagridID").datagrid({
        pagination: true,
        pageSize: 5,
        pageList: [5, 10, 15],
        nowrap: false,
        striped: true,
        idField: 'id',
        loadMsg: '数据正在努力加载，请稍后...',
        frozenColumns: [[  //固定在表格左侧的栏
            {field: 'ck', checkbox: true}
        ]]
    });
    /*图片字段格式化显示*/
    function formatPic(value,row,index) {
        var path =row.pimage;
        return "<img src='${pageContext.request.contextPath}/"+path+"' width='60px' height='60px'/>";
    }
    /*分类字段格式化显示*/
    function formatCategory(value,row,index) {
        return row.category.cname;
    }
    /*热门及上架字段格式化显示*/
    function formatHot_flag(value,row,index) {
        return value==1?"是":"否";
    }
    /*上架时间字段格式化显示*/
    function formatPdate(value,row,index) {
        var date=new Date(row.pdate);
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var date=date.getDate();
        return year+"-"+month+"-"+date;
    }

    /*新增商品*/
    function newProduct() {
        $('#product_list_dialogID').dialog('open').dialog('setTitle', '新增商品');
        $('#product_formID').form('clear');
        url = '${pageContext.request.contextPath}/ProductServlet?action=addProduct';
    }
    /*修改商品*/
    function updateProduct() {
        var row = $('#product_list_datagridID').datagrid('getSelected');
        if (row) {
            $('#product_list_dialogID').dialog('open').dialog('setTitle', '修改商品');
            $('#product_formID').form('load', row);
            url = '${pageContext.request.contextPath}/ProductServlet?action=updateProduct&pid=' + row.pid;
        }
    }
    /*删除商品*/
    function deleteProduct() {
        var row = $('#product_list_datagridID').datagrid('getSelected');
        if (row) {
            $.messager.confirm('提示', '真的要删除此商品吗?', function (r) {
                if (r) {
                    $.post('${pageContext.request.contextPath}/ProductServlet?action=deleteProduct', {pid: row.pid}, function (result) {
                        if (result.success) {
                            $.messager.show({
                                title: '提示',
                                msg: '删除成功',
                                timeout: 1000,
                                showType: 'slide'
                            });
                            $('#product_list_datagridID').datagrid('reload');	// reload the user data
                        } else {
                            $.messager.show({	// show error message
                                title: 'Error',
                                msg: '删除不成功',
                                timeout: 1000,
                                showType: 'slide'
                            });
                        }
                    }, 'json');
                }
            });
        }
    }
    /*搜索商品*/
    function searchProduct() {
        $("#product_list_datagridID").datagrid('load', {
            find_name: $("#find_name").val(),
            find_author: $("#find_category").val()
        });
    }
    /*清空搜索条件*/
    function clearSearch() {
        $("#find_name").val("");
        $("#find_category").val("");
    }
    /*保存新增和修改*/
    function saveProduct() {
        $('#product_formID').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#product_list_dialogID').dialog('close');		// close the dialog
                    $('#product_list_datagridID').datagrid('reload');	// reload the user data
                }
            }
        });
    }
</script>
</body>
</html>





